import VisConstructorNode from "@/types/VisConstructorNode";
import VisParamNode from "@/types/VisParamNode";
import { Popover, Tooltip } from "antd";
import React, { ReactNode } from "react";
import NodeBox from "./NodeBox";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import materialLight from "react-syntax-highlighter/dist/cjs/styles/prism/material-light";

export default function ConstructorNode(props: {
  constructorNode: VisConstructorNode;
}) {
  const { constructorNode } = props;

  const annotationDisplay = (
    <span style={{}}>
      {constructorNode.annotations.reduce(
        (first, second) => first + second + " ",
        ""
      )}
    </span>
  );

  const modifiersDisplay = (
    <span>
      {constructorNode.modifiers.reduce(
        (first, second) => first + second + "",
        ""
      )}
      &nbsp;
    </span>
  );
  const identifierDisplay = (
    <span style={{ fontStyle: "italic" }}>{constructorNode.identifier}</span>
  );
  const displayName = (
    <>
      {annotationDisplay}
      {modifiersDisplay}
      {identifierDisplay}
    </>
  );

  const getParamDisplay: (parameters: VisParamNode) => ReactNode = (param) => {
    const annotationsDisplay = param.annotations.length ? (
      <span style={{ color: "green" }}>
        {param.annotations.reduce((first, second) => first + second + "", "")}
      </span>
    ) : (
      ""
    );
    return (
      <>
        {annotationsDisplay}&nbsp;
        <span style={{ fontWeight: "bold" }}>{param.type}</span>&nbsp;
        <span style={{ fontStyle: "italic" }}>{param.identifier}</span>
        <br />
      </>
    );
  };

  const paramsDisplay = constructorNode.parameters.map((parameter) =>
    getParamDisplay(parameter)
  );

  return (
    <Tooltip placement="right" color="geekblue" title={paramsDisplay}>
      <Popover
        content={
          <SyntaxHighlighter
            language="java"
            style={materialLight}
            customStyle={{ border: "0", padding: 2 }}
          >
            {constructorNode.body}
          </SyntaxHighlighter>
        }
        title={
          <SyntaxHighlighter
            language="java"
            style={materialLight}
            customStyle={{ fontWeight: "bold", padding: 2 }}
          >
            {constructorNode.annotations.reduce(
              (first, second) => first + second + "",
              ""
            ) +
              constructorNode.modifiers.reduce(
                (first, second) => first + second + "",
                ""
              ) +
              constructorNode.identifier}
          </SyntaxHighlighter>
        }
      >
        <div>
          <NodeBox
            range={constructorNode.range}
            displayName={displayName}
            color="#CFD8DC"
            titleTextColor="#424242"
            icon={<span className="iconfont icon-Function"></span>}
          ></NodeBox>
        </div>
      </Popover>
    </Tooltip>
  );
}
